<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>信息查询</title>
    <!-- 引入Vue 3 -->
    <script src="static/js/vue3.4.15.global.min.js"></script>
    <!-- 引入Tailwind CSS -->
    <!-- <script src="static/js/tailwind.3.4.17.js"></script> -->
    <link href="static/css/tailwind3.4.17.css" rel="stylesheet">     
    <!-- 引入Font Awesome图标 -->
    <link href="static/css/font-awesome.min.4.7.0.css" rel="stylesheet">

   
</head>
<body class="bg-gray-50 min-h-screen flex flex-col overflow-y-overlay">
    <div id="app" class="flex-grow">
    <!-- 导航栏 -->
    <nav class="bg-white shadow-sm sticky top-0 z-50">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <div class="flex h-16">
                <div class="flex items-center">
                    <span class="text-primary text-xl font-bold flex items-center">
                        <i class="fa fa-wrench mr-2"></i>
                        信息系统
                    </span>
                </div>
                <div class="flex-grow"></div> <!-- 用于占据中间的空间 -->
                <div class="flex items-center space-x-4">
                    <a href="/query" class="text-primary  hover:text-primary px-3 py-2 rounded-md text-sm font-medium transition-custom bg-primary/10">
                        <i class="fa fa-search mr-1"></i> 查询
                    </a>
                </div>                
                <div class="flex items-center space-x-4">
                    <a href="/upload" class="text-secondary hover:text-primary px-3 py-2 rounded-md text-sm font-medium transition-custom">
                        <i class="fa fa-upload mr-1"></i> 上传
                    </a>
                </div>
                <div class="flex items-center space-x-4">
                    <a href="/category_page" class="text-secondary hover:text-primary px-3 py-2 rounded-md text-sm font-medium transition-custom">
                        <i class="fa fa-regular fa-list mr-1"></i> 分类
                    </a>
                </div>     
                 <!-- <div class="flex items-center space-x-4">
                    <a href="/history_page" class="text-secondary hover:text-primary/90 px-3 py-2 rounded-md text-sm font-medium transition-custom">
                        <i class="fa fa-history mr-1"></i> 历史
                    </a>
                </div>                   -->
                                    
            </div>
        </div>
    </nav>

    <!-- 主内容区 -->
    <main class="flex-grow max-w-7xl w-full mx-auto px-4 sm:px-6 lg:px-8 py-8" >
        <div class="bg-white rounded-xl shadow-soft p-6 md:p-8 mb-8 border border-gray-200 shadow-md">
            <h1 class="text-2xl md:text-3xl font-bold text-dark mb-6">查询信息</h1>
            
            <!-- 简化的查询表单 -->
            <form @submit="handleSubmit">
                <div>
                    <label for="query" class="text-gray-700 block mb-1">查询问题</label>
                    <div>
                        <textarea
                            id="query"
                            v-model="query"
                            rows="3"
                            class="w-full px-4 py-3 rounded-lg border border-gray-300 focus:ring-primary/50 focus:border-primary transition-custom"
                            placeholder="请输入您的查询问题..."
                            required
                            style="height: 50px;"
                        ></textarea>
                    </div>
                </div>
                <div class="mb-6 p-4 bg-gray-50 rounded-md border border-gray-200">
                    <label for="category-select" class="block text-sm font-medium text-gray-700 mb-2">选择分类:</label>
                    <select
                        id="category-select"
                        v-model="category"
                        class="w-full p-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
                    >
                        <option v-for="cat in categories" :key="cat.name" :value="cat.name">
                            {{ cat.name }}{{ cat.desc ? ` - ${cat.desc}` : '' }}
                        </option>
                    </select>
                </div>
                <div class="flex flex-col sm:flex-row justify-between items-start sm:items-center space-y-4 sm:space-y-0">
                    <div class="flex items-center">
                        <input
                            type="checkbox"
                            id="rerank"
                            v-model="rerank"
                            class="h-4 w-4 text-primary focus:ring-primary focus:ring-blue-500 rounded"
                        >
                        <label for="rerank" class="ml-2 block text-sm text-gray-700">使用重排序</label>
                    </div>
                    <button
                        type="submit"
                        :disabled="loading"
                        :class="loading ? 'bg-gray-400 cursor-not-allowed' : 'bg-primary hover:bg-primary/90'"
                        class="inline-flex items-center px-6 py-3 border border-transparent text-base font-medium rounded-md shadow-sm text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary transition-custom"
                    >   
                        <i class="fa fa-search mr-2"></i> 查询
                    </button>
                </div>
            </form>
        </div>

        <!-- 加载指示器  -->
        <div v-if="loading" class="fixed inset-0 bg-black/30 backdrop-blur-sm flex items-center justify-center z-50 transition-custom">
            <div class="bg-white rounded-xl shadow-soft p-8 flex flex-col items-center">
                <span class="inline-block animate-spin rounded-full h-10 w-10 border-t-2 border-b-2 border-primary mb-4"></span>
                <span class="text-base text-gray-600">正在处理您的请求，请稍候...</span>
            </div>
        </div>

        <!-- 结果区域 -->
        <div v-if="showResults" class="bg-white rounded-xl shadow-soft p-6 md:p-8 mb-8 transition-custom">
            <div class="flex justify-between items-center mb-6">
                <h2 class="text-xl font-bold text-dark">{{ resultCount }}</h2>
            </div>
            <div v-if="showError" class="bg-red-50 border-l-4 border-red-400 p-4 mb-6">
                <div class="flex">
                    <div class="flex-shrink-0">
                        <i class="fa fa-exclamation-circle text-red-400"></i>
                    </div>
                    <div class="ml-3">
                        <p class="text-sm text-red-700">{{ errorMessage }}</p>
                    </div>
                </div>
            </div>
            <div class="space-y-6" v-else>
                <div v-for="(result, index) in results" :key="index" class="bg-gray-50 rounded-lg p-5 shadow-sm hover:shadow-md transition-all duration-200 border border-gray-100">
                    <div class="flex justify-between items-center mb-3">
                        <h3 class="font-medium text-dark">结果 {{ index + 1 }}</h3>
                        <span class="bg-blue-100 text-blue-800 text-xs font-medium px-2.5 py-0.5 rounded-full">相似度: {{ result.score.toFixed(4) }}</span>
                    </div>
                    <div class="mb-4">{{ result.text }}</div>
                    <div v-if="result.metadata && result.metadata.type === 'image' && result.metadata.name && result.metadata.image_url && result.metadata.image_url.startsWith('/saved_images/')" class="mt-4 border border-gray-200 rounded-lg overflow-hidden bg-white p-2">
                        <img :src="result.metadata.image_url" :alt="result.metadata.original_name || '相关图片'" class="w-full h-auto object-contain max-h-64" loading="lazy" @error="(e) => { e.target.alt = '图片不可用'; console.error(`图片加载失败:${e.target.src}`); }">
                        <p class="text-sm text-secondary mt-2 text-center">{{ result.metadata.original_name || '相关图片' }}</p>
                    </div>
                    <!-- 不显示元数据 -->
                    <!-- <div v-if="result.metadata && Object.keys(result.metadata).length > 0" class="mt-3 text-xs text-secondary bg-gray-100 p-3 rounded-md">
                        <div class="grid grid-cols-1 md:grid-cols-2 gap-2">
                            <div v-for="(value, key) in result.metadata" :key="key" class="flex justify-left" v-if="key !== 'source' || result.metadata.type !== 'image'">
                                <span class="font-medium">{{ key }}:</span>
                                <span class="overflow-hidden whitespace-nowrap text-overflow-ellipsis">{{ value }}</span>
                            </div>
                        </div>
                    </div> -->
                </div>
            </div>
        </div>
    </main>

    <!-- 页脚 -->
    <footer class="bg-white border-t border-gray-200 py-6">
        <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
            <p class="text-center text-sm text-gray-500">个人信息系统 © 2025</p>
        </div>
    </footer>

    <!-- 移动端菜单按钮 -->
    <button class="fixed bottom-6 right-6 bg-primary text-white p-3 rounded-full shadow-lg z-50 md:hidden" @click="alert('移动端菜单功能尚未实现')">
        <i class="fa fa-bars"></i>
    </button>

    </div>

    <!-- 引入外部JavaScript文件 -->
    <script src="static/js/query.js"></script>
</body>
</html>